<template>
    <el-card>
        <el-page-header title="产品管理" content="产品列表" icon="" />
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="title" label="产品名称" width="180" />
            <el-table-column label="产品简要描述">
                <template #default="scope">
                    {{ scope.row.briefIntroduction }}
                </template>
            </el-table-column>
            <el-table-column label="更新时间">
                <template #default="scope">
                    {{ formatTime.getTime(scope.row.editTime) }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button circle :icon="Edit" type="warning" @click="handleEdit(scope.row)"></el-button>
                    <el-popconfirm @confirm="handleDelete(scope.row)" title="确定删除此新闻吗？" confirm-button-text="确定" cancel-button-text="取消">
                        <template #reference>
                            <el-button circle :icon="Delete" type="danger"></el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus';
import { Star, Edit, Delete,StarFilled } from '@element-plus/icons-vue'
import Upload from '../../components/upload/Upload.vue'
import formatTime from '../../util/formatTime'
import axios from 'axios'
const tableData = ref([])
const router = useRouter()

onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get('/adminapi/product/list')
    tableData.value = res.data.data
}

const handleDelete = async (data) => {
    const res = await axios.delete(`/adminapi/product/list/${data._id}`)
    if(res.data.ActionType === "OK"){
        ElMessage.success("删除新闻成功")
        getTableData()
    }
}

const handleEdit = (data) => {
    // console.log(data)
    router.push(`/product-manage/productedit/${data._id}`)
}
</script>

<style lang="scss" scoped>
.el-table {
    margin-top: 50px;
}
</style>